<template>
    <div class="entry">
        <el-tabs type="card" v-model="editableTabsValue" @tab-click="handleTabClick">
            <el-tab-pane name="合规条款及规则">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    指标中心
                </span>
                <div class="entry-list">
                    <ComplianceClause ref="ComplianceClause"></ComplianceClause>
                </div>
            </el-tab-pane>
            <el-tab-pane name="复核">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    复核
                </span>
                <div>
                    <ClauseReview ref="ClauseReview" :editableTabsValue="editableTabsValue"></ClauseReview>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ComplianceClause from './entry-standard-library/compliance-clause.vue';
import ClauseReview from './entry-standard-library/clause-review.vue';
import { VueObject } from '@/common/vo';
@Component({
    name: 'EntryStandardLibrary',
    components: {
        ComplianceClause,
        ClauseReview,
    },
})
export default class EntryStandardLibrary extends Vue {
    editableTabsValue: string = '合规条款及规则';

    handleTabClick(ele) {
        if (ele.name === '复核') {
            (this.$refs['ClauseReview'] as VueObject).getIndexClauseCheck();
        } else if (ele.name === '合规条款及规则') {
            (this.$refs['ComplianceClause'] as VueObject).getIndexClauseList();
        }
    }
}
</script>
<style lang="scss" scoped>
.entry {
    // padding-top: 10px;
    min-width: 1200px;
}
.entry /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.entry /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.entry /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}
</style>
